<script>
import { routes } from '../router/index'

export default {
    data() {
        this.routeMap=new Map();
        this.getChildrenRoute(routes);
        return {
            list:[],
        }
    },
    methods: {
        getChildrenRoute(route){
            route.forEach(item => {
                this.routeMap.set(item.name,item.label)
                if(item.children){
                    this.getChildrenRoute(item.children)
                }
            });
        }
    },
    watch:{
        $route:{
            handler(route){
                this.list=route.matched.map(item=>{
                    return {
                        name:item.name,
                        label:this.routeMap.get(item.name)
                    }
                });
                // this.$store.commit('setCurrentRoute',route.path);
            },
            immediate: true,
            deep:true,

        }
    },
}

</script>
<template>
    <el-breadcrumb separator=">">
        <el-breadcrumb-item v-for="item of list" :key="item.name" :to="{name:item.name}">
            <el-button class="btn">{{item.label}}</el-button>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<style lang="scss">
.el-breadcrumb{
    margin-bottom: 20px;
    font-size: 20px;
}
.el-breadcrumb .el-breadcrumb__item:last-child .btn{
    background-color: blueviolet;
    color: chocolate;
}
</style>
